<template>
  <div class="book-item clearfix">
    <div class="bi-left">
      <img :src="value.pic"/>
    </div>
    <div class="bi-right">
      <div class="book-name">
        <a :href="'#/mall/list/'+value.id" v-if="isBook">{{value.title}}</a>
        <a :href="'#/mall/good-list/'+value.id" v-if="!isBook">{{value.title}}</a>
      </div>
      <div class="price1" v-if="value.money">
        ¥{{value.money}}
      </div>
      <div class="price1" v-if="value.price">
        ¥{{value.price}}
      </div>
      <div class="price1" v-if="value.real_price">
        ¥{{value.real_price}}
      </div>
      <div class="price2" v-if="value.origin_price">
        ¥{{value.origin_price}}
      </div>
    </div>
  </div>
</template>

<script>
import book5 from '@/assets/mock_images/book5.png'
export default {

  name: 'bookItem',

  data() {
    return {
      book5
    };
  },
  props: {
    value: {
      type: Object,
      default: function() { return { /*  */ } }
    },
    isBook: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.book-item{
  height: 100px;
  margin: 10px 0;
  .bi-left{
    float: left;
    width: 90px;
    height: 100px;
    overflow: hidden;
    img{
      width: 90px;
    }
  }
  .bi-right{
    float: left;
    width: 100px;
    margin-left: 10px;
    .book-name{
      height: 52px;
      font-size: 16px;
      line-height: 26px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      >a{
        &:hover{
          color: #00A2EA;
          text-decoration: underline;
        }
      }
    }
    .price1{
      height: 24px;
      color: #EF6401;
      font-size: 22px;
    }
    .price2{
      height: 22px;
      font-size: 16px;
      color: #999;
      text-decoration: line-through;
    }
  }
}
</style>